import React,{useState,useEffect} from 'react'
import { Grid, NavBar ,Search} from 'react-vant';
import widthRoute from '../Utils/widthRoute';
import { DeleteO } from '@react-vant/icons';
import { useDispatch ,useSelector } from 'react-redux';
import { STORETYPE,SEARCHLIST} from '../Type/Store.d';
import _ from 'lodash'
function SearchS(route:any) {
    // console.log(route.route);
    const Dispatch = useDispatch();
    const [value, setValue] = useState('');

    const SearchList = useSelector((state:STORETYPE)=>state.SearchList) as string[];

    return (
        <div className='Search'>
            <NavBar
                title="搜索页面"
                leftText="返回"
                onClickLeft={() => route.route.Navigate('/')}
            />
            <Search
                showAction
                label="商品"
                // 点击搜索按钮时使用防抖/节流进行优化)
                actionText={<div onClick={_.debounce(() => {
                    // console.log(value);
                    Dispatch({
                        type:SEARCHLIST,
                        payload:value
                    })
                    // console.log(SearchList);
                    let Time = setTimeout(()=>{
                        route.route.Navigate('/SearchList',{state:value})
                        clearTimeout(Time)
                    },1000)
                    
                },2000)}>搜索</div>}
                value={value}
                onChange={setValue}
                placeholder="请输入搜索关键词"
            />
            <h3>历史搜索 <span><DeleteO  /></span></h3>
            <main>
            {
                SearchList && SearchList.length>0 ?SearchList.map((item:string,index:number)=>{
                    return <li key={index}>{item}</li>
                }):'暂无历史记录'
            }
            </main>
        </div>
    )
}

export default widthRoute(SearchS)